<template>
  <div id="liveList">
    <el-input size="small" @keyup.enter.native="searchHandle" style="width: 300px" v-model="keywords"
              placeholder="搜索直播名称"></el-input>
    <el-button @click="searchHandle()" style="margin-left: 10px" type="primary" icon="el-icon-search" size="small">搜索
    </el-button>
    <el-button @click="dialogTableVisible=true" style="margin-left: 10px" type="primary" icon="el-icon-plus" size="small">预约直播
    </el-button>
    <el-table
        height="500"
        :data="liveList"
        v-loading="loading"
        stripe
        element-loading-text="拼命加载中"
        style="width: 99.5%">
      <el-table-column
          label="序号"
          align="center"
          type="index"
          :index="indexMethod">
      </el-table-column>
      <el-table-column
          label="直播封面"
          align="center"
          show-overflow-tooltip>
        <template slot-scope="scope">
          <el-image :src="scope.row.coverUrl" style="height:50px"></el-image>
        </template>
      </el-table-column>
      <el-table-column
          label="直播标题"
          prop="liveTitle"
          align="center"
          show-overflow-tooltip>
      </el-table-column>
      <el-table-column
          label="直播内容"
          prop="liveIntroduce"
          align="center"
          show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
          label="直播地址"
          prop="liveUrl"
          align="center"
          show-overflow-tooltip>
        <template slot-scope="scope">
          <el-link :href="scope.row.liveUrl" type="primary" :underline="false">链接</el-link>
        </template>
      </el-table-column>
      <el-table-column
          label="开始时间"
          sortable
          align="center"
          prop="beginTime"
          show-overflow-tooltip>
      </el-table-column>
      <el-table-column
          label="主讲人"
          align="center"
          prop="speaker"
          show-overflow-tooltip>
      </el-table-column>
      <el-table-column
          label="操作"
          align="center"
      >
        <template slot-scope="scope">
          <el-tooltip class="item" effect="light" content="修改" placement="top" >
            <el-button @click="updateHandle(scope.row)" size="mini" icon="el-icon-edit"
                       type="primary"></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="light" content="删除" placement="top" >
            <el-button @click="deleteHandle(scope.row.liveId,scope.row.liveTitle)" size="mini" icon="el-icon-delete"
                       type="danger"></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        background
        layout="total,prev, pager, next"
        :total="total"
        align="center"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="pageSize"
        :hide-on-single-page="value"
        style="padding-top: 15px"
    >
    </el-pagination>

    <el-dialog title="预约直播" :visible.sync="dialogTableVisible" :close-on-click-modal=false >
      <el-form :model="form">
        <el-form-item label="直播标题" :label-width="formLabelWidth">
          <el-input v-model="form.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="直播内容" :label-width="formLabelWidth">
          <el-input type="textarea" maxlength="100" show-word-limit   v-model="form.content" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="主讲人" :label-width="formLabelWidth">
          <el-input v-model="form.speaker" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="开始时间"   :label-width="formLabelWidth">
          <el-date-picker
              v-model="form.beginTime"
              type="datetime"
              placeholder="选择日期时间" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="直播封面" :label-width="formLabelWidth" >
          <el-upload
              ref="upload"
              class="avatar-uploader"
              action="/api/upload/?ser=user"
              :on-success="OnSuccess"
              :limit="1"
              :auto-upload="true">
            <i class="el-icon-upload"> 点击上传</i>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogTableVisible = false">取 消</el-button>
        <el-button type="primary" @click="uploadLive">预约</el-button>
      </div>
    </el-dialog >
    <el-dialog title="更新直播" :visible.sync="dialogFormVisible" :close-on-click-modal=false >
      <el-form :model="updateForm">
        <el-form-item label="直播标题" :label-width="formLabelWidth">
          <el-input v-model="updateForm.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="直播内容" :label-width="formLabelWidth">
          <el-input type="textarea" maxlength="100" show-word-limit   v-model="updateForm.content" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="主讲人" :label-width="formLabelWidth">
          <el-input v-model="updateForm.speaker" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="开始时间"   :label-width="formLabelWidth">
          <el-date-picker
              v-model="updateForm.beginTime"
              type="datetime"
              placeholder="选择日期时间" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="直播封面" :label-width="formLabelWidth" >
          <el-upload
              ref="upload"
              class="avatar-uploader"
              action="/api/upload/?ser=user"
              :on-success="OnSuccessUpdate"
              :limit="1"
              :auto-upload="true">
            <i class="el-icon-upload"> 点击上传</i>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="ackUpdate">修改</el-button>
      </div>
    </el-dialog >
  </div>
</template>

<script>
import {delLive, getLiveList, saveLive, updateLive} from "@/network/companyUser";

export default {
  name: "LiveManage",
  data() {
    return {
      liveList: [],
      live: {},
      loading: true,
      keywords: '',
      value: false,
      currentPage: 1,
      total: 1,
      pageSize: 5,
      detailInfoVisible: false,
      dialogTableVisible:false,
      formLabelWidth:'120px',
      form:{
        userName:'',
        companyName:'',
        title:'',
        content:'',
        coverUrl:'',
        beginTime:'',
        speaker:''
      },
      dialogFormVisible:false,
      updateForm:{
        liveId:'',
        title:'',
        content:'',
        coverUrl:'',
        beginTime:'',
        speaker:''
      }
    }
  },

  created() {
    this.form.userName = localStorage.getItem("company_userName");
    this.form.companyName = localStorage.getItem("company_companyName");
    this.handleCurrentChange(this.currentPage);
  },
  methods: {
    handleCurrentChange(currentPage) {
      getLiveList(this.keywords, currentPage, this.pageSize,this.form.companyName).then(res => {
        this.loading = false;
        this.total = res.data.data.total;
        this.liveList = res.data.data.list;
        this.currentPage = currentPage;
      })
    },
    searchHandle() {
      this.currentPage = 1;
      this.handleCurrentChange(this.currentPage)
    },
    deleteHandle(liveId, liveName) {
      this.$confirm('你确定要删除直播信息"' + liveName + '"吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delLive(liveId).then(res => {
          this.$message.success('直播' + liveName + res.data.data);
          this.handleCurrentChange(this.currentPage)
        }).catch()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        });
      });
    },
    updateHandle(live){
      this.updateForm.liveId = live.liveId;
      this.updateForm.title = live.liveTitle;
      this.updateForm.content = live.liveIntroduce;
      this.updateForm.beginTime = live.beginTime;
      this.updateForm.speaker = live.speaker;
      this.dialogFormVisible = true;
    },
    ackUpdate(){
      updateLive(this.updateForm).then(res=>{
        if(res!=undefined){
          this.$message.success(res.data.data);
          this.dialogFormVisible=false;
          this.updateForm.coverUrl ='';
          this.handleCurrentChange(this.currentPage)
        }
      })
    },
    indexMethod(index) {
      return (this.currentPage - 1) * this.pageSize + 1 + index;
    },
    detailInfo(live) {
      this.detailInfoVisible = true;
      this.live = live;
    },
    OnSuccess(res){
      if(res.data!=undefined){
        this.form.coverUrl=res.data;
      }
    },
    OnSuccessUpdate(res){
      if(res.data!=undefined){
        this.updateForm.coverUrl=res.data;
      }
    },
    uploadLive(){
      if(this.form.title == ''){
            this.$message.warning("标题不能为空")
      }
      if(this.form.beginTime == ''){
        this.$message.warning("开始时间不能为空")
      }
      saveLive(this.form).then(res=>{
        if(res.data!=undefined){
          this.$message.success("预约成功");
          this.dialogTableVisible=false;
          this.searchHandle();
        }
      })
    }
  }
}
</script>
<style scoped>
.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  min-width: 130px;
  height: 50px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-left: 50px;
  margin-bottom: 0;
  width: 40%;
}

.el-form-item__content {
  height: 50px;
}
</style>